<template>
  <router-view @modifyActive="modifyActive"/>
  <tabbar :faActive="active" @changeActive="changeActive"></tabbar>
</template>

<script setup lang="ts">
import tabbar from "./plugins/tabbar.vue"
import { useRouter,useRoute } from 'vue-router';
import { ref, computed, onMounted,watch } from 'vue';
import { useStore } from 'vuex'
const active = ref('')
const route = useRoute();
const router = useRouter();
const store = useStore()
// if(route.fullPath != "/"){
//   console.log("返回首页")
//   router.replace("/")
// }

watch(
  () => store.state.nowActive,
  (newChange, oldChange) => {
    modifyActive(newChange)
  }
)

const useragent:any = navigator.userAgent
console.log(useragent);
if ( useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
  console.log('不是微信浏览器') 
}else{
  console.log('是微信浏览器')
}

function modifyActive(val: string){
  active.value = val
}

function changeActive(val:string){
  if(val == null){
    router.replace("/")
    active.value = ""
  }else{
    router.replace(`/${val}`)
    active.value = val
  }
}

</script>

<style lang="less">
/*#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}*/
#app{
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
</style>
